HTML元素的組成
以下圖為例

通常都有一個起始標籤<>和一個結束標籤< / >
在起始標籤和結束標籤之間會寫內容，以上面的例子來說，內容就是My cat is very grumpy。

沒有內容的標籤則不會有结束標籤，因為不需要透過內容來產生效果，例如:img

元素內可以添加屬性（Attribute)
以下圖為例
元素的名稱(p)和添加的屬性名稱(class)會空一格
屬性名稱(class)後面都會接一個等於「=」的符號放在起始標籤<>內

VS CODE Emmet
只要在vs code內輸入開頭
例如: h1，VS CODE內建的Emmet 就會自動產生成完整的html元素

相關參考資料: Emmet Documentation

常用的幾個HTML元素

1. 標題(Headings) : h1~h6
   以下圖為例
   在VS CODE上輸入h1~h6
   
   在瀏覽器上呈現的畫面
   
   h1 是用來為網頁的主標題，只會在網頁上出現一次。
   h2則是次標題，h3則是相較於h2更次要的標題，以此類推到h6

2. 段落(Paragraph):p
   新增一段文章段落時，就可以使用p
   
   在瀏覽器上呈現的畫面
   

3. 圖片(image):img
   src 指的是source，內容要寫圖片的取得路徑
   alt 指的是alternative，內容則是寫給視障人士觀看用的說明
   
   在瀏覽器上呈現的畫面
   

新增圖片的方式:

• 新增不是存在電腦的圖片到網頁上，可以按滑鼠右鍵→複製圖片位址，將複製的內容貼到src="複製內容"
  即可
• 新增存在電腦內的圖片到網頁上，可以在src=" "引號內寫資料夾名稱/圖片的檔名，如果是資料夾裡面資料夾內的圖片就再多打一個斜線

4. 超連結: a
   在網頁上插入URL
   href 指的是 Hypertext Reference
   
   在瀏覽器上呈現的畫面
   
   點擊紫色文字部分就會連到指定的網址

如果多新增一個屬性 target="blank"
則會開啟新分頁到指定網址

如果新增 title="內容"，則會有顯示彈跳視窗提示的效果

在瀏覽器上呈現的畫面

5. 列表標籤: ul li / ol li
   
   在瀏覽器上呈現的畫面
   

在瀏覽器上呈現的畫面

參考資料:HTML basics

以上為個人學習筆記整理
若有錯誤，歡迎指正